import { StackNavigator, TabNavigator, NavigationActions } from 'react-navigation';
import React, { Component } from 'react';
import { Platform, ScrollView, Picker, StyleSheet, Text, View, Image, Button, TouchableHighlight, FlatList,PixelRatio,Switch } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import DatePicker from 'react-native-datepicker';

class SetUpScreen extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
			value1:false,
			value2:false,
			value3:false,
			selectedValue: '推送',
			date:'0:00'
		};
    }

    static navigationOptions =(navigation) = {
		headerTitle: '设置',
		headerRight: <View style={{margin:10}}/>,
        headerTitleStyle: {
            fontWeight: 'normal',
            color: '#2196F7',
            alignSelf: 'center'
        },
    };

    render() {
        const {navigate} = this.props.navigation;
        return (
		    <ScrollView>
			<View style={{paddingLeft:50,paddingRight:50,paddingTop:60}}>
			  <View style={{flexDirection:'row',justifyContent: 'space-between',padding:5,paddingBottom:10}}>
			    <Text style={{fontSize:20,color:'black'}}> 任务提醒 </Text>
				<Switch value={this.state.value1} onValueChange={(value)=>{this.setState({value1:value});}}/>
			  </View>
			  <View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
			  <View style={{flexDirection:'row',justifyContent: 'space-between',padding:5,paddingTop:30,paddingBottom:10}}>
			    <Text style={{fontSize:20,color:'black'}}> 提醒方式 </Text>
				<TouchableHighlight underlayColor="#eee" onPress={() => this.change()}>
				  <Text style={{fontSize:20,color:'black'}}> {this.state.selectedValue} </Text>
				</TouchableHighlight>
			  </View>
			  <View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
			  <View style={{flexDirection:'row',justifyContent: 'space-between',padding:5,paddingTop:30}}>
			    <View style={{alignItems: 'flex-end', justifyContent: 'center'}}>
				  <Text style={{fontSize:20,color:'black'}}> 提醒时间 </Text>
				</View>
				  <DatePicker
				    style={{width:40, height:40}}
				    date={this.state.date}
				    mode="time"
					hideText='true'
				    onDateChange={(date) => {this.setState({date: date})}}
				  />
			  </View>
			  <View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
			  <View style={{flexDirection:'row',justifyContent: 'space-between',padding:5,paddingTop:30}}>
	            <View style={{width:100,flexDirection:'row',paddingBottom:10}}>
				  <View style={{width:15}}/>
				  <View style={{width:85}}>
				    <Text style={{fontSize:20,color:'black'}}> 声音 </Text>
				  </View>
				</View>
				<Switch value={this.state.value2} onValueChange={(value)=>{this.setState({value2:value});}}/>
			  </View>
			  <View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
			  <View style={{flexDirection:'row',justifyContent: 'space-between',padding:5,paddingTop:30,paddingBottom:10}}>
			    <View style={{width:100,flexDirection:'row'}}>
				  <View style={{width:15}}/>
				  <View style={{width:85}}>
				    <Text style={{fontSize:20,color:'black'}}> 震动 </Text>
				  </View>
				</View>
				<Switch value={this.state.value3} onValueChange={(value)=>{this.setState({value3:value});}}/>
			  </View>
			  <View style={{height: 1/PixelRatio.get(), backgroundColor:'#c4c4c4'}}/>
			</View>
			</ScrollView>
        )
    }
	change() {
		alert("你没得选了");
	}
}

const styles = StyleSheet.create({
})

export default SetUpScreen;
